<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>CMDB Home</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="static/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css"/>
    <link rel="stylesheet" href="static/main.css"/>
    <script src="static/jquery-1.8.3.js"></script>
    <script src="static/jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
    <script src="static/jquery.validate.js"></script>

</head>
<body>



<div id="homePage" data-role="page" data-theme="c">
    <div data-role="header">
        <button data-icon="home">Home</button>
        <h1 class="headertext1">Entity Types</h1>
        <button data-icon="arrow-r" data-iconpos="right">Logout</button>
    </div>
    <div data-role="content">
        <div class="topbuttonbar">
            <button data-inline="true" data-icon="check" data-mini="true" data-theme="b">Create New Entity Type</button>
         </div>
        <form>
            <div data-inline="true" data-role='header'>
                <label for="entityTypeName" >Entity Type Name:</label>
                <label for="entityInstanceName" class="spaceheader">Instance:</label>
            </div>
            <div data-inline="true" data-role='fieldcontain'>
                <label for="entityTypeName" >Device</label>
                <span class="spaceLabels"/>
             	<button  data-inline="true" data-icon="check" data-mini="true" data-theme="b">List</button>
            	<button data-inline="true" data-icon="check" data-mini="true" data-theme="b">New</button>
           </div>
             <div data-inline="true" data-role='fieldcontain'>
                <label for="entityTypeName" >Location</label>
                <span class="spaceLabels"/>
             	<button  data-inline="true" data-icon="check" data-mini="true" data-theme="b">List</button>
            	<button data-inline="true" data-icon="check" data-mini="true" data-theme="b">New</button>
           </div>
      
        </form>
    </div>
    <div data-role="footer">Copyright notice</div>
</div>


<div id="createEntityInstancePage" data-role="page" data-theme="c">
    <div data-role="header">
        <button data-icon="home">Home</button>
        <h1 class="headertext1">Create Entity Instance</h1>
        <button data-icon="arrow-r" data-iconpos="right">Logout</button>
    </div>
    <div data-role="content">
        <div class="topbuttonbar">
            <button data-inline="true" data-icon="check" data-mini="true" data-theme="b">Save</button>
            <button data-inline="true" data-icon="delete" data-mini="true">Cancel</button>
        </div>
        <form>
            <div data-role="fieldcontain">
                <label for="entityTypeName">Entity Type Name:</label>
                <input type="text" id="entityTypeName" name="entityTypeName" readonly value="Location"
                       data-mini="true"/>
            </div>
            <div data-role="fieldcontain">
                <label for="entityInstanceName">Entity Instance Name:</label>
                <input type="text" id="entityInstanceName" name="entityInstanceName" required="" data-mini="true"/>
            </div>
            <div>
                <h3>Properties</h3>
            </div>
            <!--html within this div will be populated on the fly, showing some content here for demo-->
            <div id="propertiesDiv">
                <div data-role="fieldcontain">
                    <label for="property1">Property1:</label>
                    <input type="text" id="property1" name="property1" required data-mini="true"/>
                </div>
                <div data-role="fieldcontain">
                    <label for="property2">Property2:</label>
                    <input type="number" id="property2" name="property2" required data-mini="true"/>
                </div>
                <div data-role="fieldcontain">
                    <label for="property3">Property3:</label>
                    <select id="property3" name="property3" data-role="slider" data-mini="true">
                        <option value="false">No</option>
                        <option value="true" selected>Yes</option>
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="property4">Property4:</label>
                    <input type="date" id="property4" name="property4" data-mini="true"/>
                </div>
            </div>
        </form>
        <div class="bottombuttonbar">
            <button data-inline="true" data-icon="check" data-mini="true" data-theme="b">Save</button>
            <button data-inline="true" data-icon="delete" data-mini="true">Cancel</button>
        </div>
    </div>
    <div data-role="footer">Copyright notice</div>
</div>
</body>
</html>